<template>
  <div class="user-query-container">
    <h3>账户信息查询</h3>
    <div class="query-form">
      <div class="input-group">
        <label for="userId">用户ID：</label>
        <input 
          type="text" 
          id="userId" 
          v-model="userId" 
          placeholder="请输入用户ID"
          @keyup.enter="handleQuery"
        />
      </div>
      <button class="query-button" @click="handleQuery" :disabled="!userId.trim()">查询</button>
    </div>
    <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { userApi } from '../api'

const router = useRouter()
const userId = ref('')
const errorMessage = ref('')

const handleQuery = async () => {
  if (!userId.value.trim()) {
    errorMessage.value = '请输入用户ID'
    return
  }
  
  errorMessage.value = ''
  try {
    // 在实际应用中，这里会调用API获取用户信息
    // 为了演示，我们直接跳转到详情页
    // const response = await userApi.getUserInfo(userId.value)
    // if (response && response.code === 0) {
    router.push(`/user-detail/${userId.value}`)
    // } else {
    //   errorMessage.value = response?.message || '查询失败，请稍后再试'
    // }
  } catch (error) {
    console.error('查询用户信息失败:', error)
    errorMessage.value = '查询失败，请稍后再试'
  }
}
</script>

<style scoped>
.user-query-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

h1 {
  color: #333;
  margin-bottom: 30px;
}

.query-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

label {
  margin-bottom: 8px;
  font-weight: bold;
  color: #555;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.query-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.query-button:hover {
  background-color: #45a049;
}

.query-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.error-message {
  color: #f44336;
  margin-top: 10px;
}
</style>